---
import '/assets/main.css'
import type { MDXLayoutProps } from 'astro'
import TOC from '/components/TOC.svelte'
import Input from './_example/input.mdx'
import Output from './_example/output.mdx'
import Example from './_example/input.astro'
import Split from './_Split.svelte'
import Browser from './_Browser.svelte'
import { searchForWorkspaceRoot } from 'vite'
import { relative } from 'node:path'
import logo from '/assets/logo.svg'
import preview from '/public/preview.png'
import pkg from '/../packages/fluid-tailwind/package.json'
import { getImage } from 'astro:assets'
import Stargazers from '/components/Stargazers.svelte'
import Link from '/components/Link.astro'
import External from '/components/icons/External.astro'
import { Content as Lead } from './_lead.mdx'

const canonicalURL = new URL(Astro.url.pathname, Astro.site)

const repo = pkg.repository.url

const previewOptimized = await getImage({ src: preview, format: 'png' })
const image = import.meta.env.URL
	? new URL(previewOptimized.src, import.meta.env.URL)
	: previewOptimized.src

type Props = MDXLayoutProps<{
	title: string
	headline: string
	description: string
}>

const { headings, file, frontmatter } = Astro.props

const root = searchForWorkspaceRoot(file)
const path = relative(root, file)
---

<html
	lang="en"
	class="min-h-screen scroll-pt-10 overflow-x-hidden bg-white antialiased motion-safe:scroll-smooth dark:bg-slate-900"
>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href={logo.src} />
		<meta name="twitter:creator" content="@mbarvian" />
		<meta property="og:type" content="article" />
		<meta property="og:image" content={image} />
		<meta property="og:site_name" content="Fluid for Tailwind CSS" />
		<meta name="twitter:card" content="summary_large_image" />
		<meta property="twitter:image" content={image} />
		<meta name="generator" content={Astro.generator} />
		<title>{frontmatter.title}</title>
		<link rel="canonical" href={canonicalURL} />
		<meta property="og:title" content={frontmatter.title} />
		<meta name="twitter:title" content={frontmatter.title} />
		<meta name="description" content={frontmatter.description} />
		<meta property="og:description" content={frontmatter.description} />
		<meta name="twitter:description" content={frontmatter.description} />
		<script type="application/ld+json">
			{
				"@context": "https://schema.org",
				"@type": "WebSite",
				"name": "Fluid for Tailwind CSS",
				"alternateName": ["fluid-tailwind"],
				"url": "https://fluid.tw/"
			}
		</script>
	</head>
	<header class="~pt-6/8 ~pb-20/28 relative">
		<div
			class="~bottom-40/72 absolute inset-0 -z-10 overflow-clip bg-slate-50 dark:border-b dark:border-white/5 dark:bg-[#0B1120]"
		>
			<div
				class="bg-gradients dark:bg-fluid absolute inset-y-0 left-1/2 size-full max-w-[120rem] -translate-x-1/2 bg-[size:100%_100%] bg-no-repeat opacity-30 dark:mix-blend-screen dark:blur-3xl"
			>
			</div>
		</div>
		<nav class="~mb-16/28 ~gap-5/6 container flex items-center justify-start">
			<div class="flex items-center gap-4">
				<svg
					class="h-6"
					role="presentation"
					viewBox="0 0 43 43"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
				>
					<rect width="43" height="43" rx="6" class="fill-slate-700 dark:fill-slate-600"></rect>
					<path
						d="M34 19.8607C32.7967 22.6573 31.6397 24.5463 30.5289 25.5278C29.3785 26.5093 28.195 27 26.9785 27C25.0744 26.8924 23.3686 25.9042 21.8612 24.0354L18.8264 20.2238C18.324 19.565 17.6694 19.249 16.8628 19.2759C16.0298 19.2759 15.3884 19.686 14.9388 20.5061C14.476 21.3531 13.9008 22.6707 13.2132 24.4589L10 22.5833C10.4099 21.2523 10.8727 20.1095 11.3884 19.1549C11.9041 18.2003 12.4595 17.4205 13.0545 16.8155C14.2843 15.6054 15.5603 15.0004 16.8826 15.0004C18.0331 14.987 19.1107 15.3164 20.1157 15.9886C21.1339 16.6474 22.0926 17.6692 22.9917 19.054C24.6182 21.5682 25.9537 22.8253 26.9983 22.8253C27.8579 22.8253 28.5719 22.3279 29.1405 21.333C29.4182 20.8221 29.7025 20.2574 29.9934 19.6389C30.2843 19.0204 30.562 18.3751 30.8264 17.7028L34 19.8607Z"
						fill="white"></path>
				</svg>
				<span class="text-slate-700 dark:text-slate-200"
					>Fluid for Tailwind<span class="max-[24.5rem]:sr-only"> CSS</span></span
				>
			</div>
			<a
				href={repo}
				class="ml-auto flex items-center gap-2.5 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
				aria-label="View on GitHub"
			>
				<Stargazers client:only="svelte" />
				<svg viewBox="0 0 16 16" class="size-6" fill="currentColor" role="none">
					<path
						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
					></path>
				</svg>
			</a>
			<a
				href="https://x.com/mbarvian"
				class="max-[22rem]:hidden text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
				aria-label="Follow on X"
			>
				<svg viewBox="0 0 24 24" class="size-6 fill-current">
					<path
						d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
					></path></svg
				>
			</a>
		</nav>
		<div class="container relative flex flex-col items-center">
			<h1
				class="~text-4xl/6xl max-w-5xl text-balance text-center font-bold tracking-tight text-slate-900 dark:text-white"
			>
				{frontmatter.headline}
			</h1>
			<div
				class="prose prose-lg prose-slate dark:prose-invert mt-6 max-w-3xl text-balance text-center dark:text-slate-300"
			>
				<Lead />
			</div>
			<div class="~mt-6/10 flex flex-wrap items-center justify-center gap-6">
				<a
					class="dark:highlight-white/20 flex h-12 items-center justify-center rounded-lg bg-slate-900 px-6 font-semibold text-white transition hover:bg-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 active:bg-slate-900 active:duration-0 dark:bg-sky-500 dark:hover:bg-sky-400 dark:active:bg-sky-500"
					href="#installation">Get started</a
				>
				<a
					class="flex h-12 items-center rounded-lg border border-slate-900/15 px-5 font-semibold text-slate-900 transition hover:bg-slate-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:border-white/15 dark:text-white dark:hover:bg-white/10"
					href="https://play.tailwindcss.com/2ChgQNWIF7"
					target="_blank"
				>
					Try in Tailwind Play
					<External class="h-5" />
				</a>
			</div>
			<div class="~mt-16/24 lg:~mt-24/36 relative w-full">
				<Split
					class="~h-[29.5rem]/[40rem] lg:ml-auto lg:w-[61.8%] dark:bg-slate-900/70 dark:backdrop-blur dark:[--ec-frm-edActTabBg:transparent] dark:[--ec-frm-edTabBarBg:transparent] dark:[&_.frame]:![--code-background:transparent]"
					shadow="shadow-xl dark:shadow-none"
					rows="grid-rows-[minmax(0,1.68fr)]"
				>
					<Input />
					<Output />
				</Split>
				<Browser
					class="supports-sda:animate-parallax supports-sda:top-0 supports-sda:[animation-timeline:view()] absolute -top-10 left-0 right-[38.2%] z-10 h-full max-lg:hidden"
					client:intersecting={{ threshold: 0.5 }}
				>
					<Example />
				</Browser>
			</div>
		</div>
	</header>
	<div class="~lg:~gap-x-6/10 container grid grid-cols-1 lg:grid-cols-[auto_minmax(0,1fr)]">
		<div class="relative w-[13rem] max-lg:hidden">
			<div class="~lg:~pr-6/10 sticky top-0 -mt-10 max-h-screen overflow-y-auto py-10">
				<TOC headings={headings.filter((h) => h.slug !== 'features')} client:load />
			</div>
		</div>
		<main>
			<article class="prose prose-slate dark:prose-invert mx-auto w-full lg:max-w-none">
				<slot />
			</article>
		</main>
		<footer
			class="mt-16 justify-between border-t border-slate-200 pb-14 pt-10 text-sm text-slate-500 sm:flex lg:col-start-2 dark:border-slate-200/5"
		>
			<div class="mb-6 sm:mb-0 sm:flex">
				<p>
					Built by <Link
						class="font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300"
						href="https://barvian.me">Max Barvian</Link
					>. Not affiliated with Tailwind Labs Inc.
				</p>
			</div>
			<Link
				class="font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300"
				href={`${repo}/edit/main/${path}`}>Edit this page on GitHub</Link
			>
		</footer>
	</div>


</html>
